$(function() {
    // 1.1 获取裁剪区域的 DOM 元素
    var img = $('#image')
        // 1.2 配置选项
    const options = {
        // 纵横比
        aspectRatio: 1,
        // 指定预览区域
        preview: '.img-preview'
    }

    // 1.3 创建裁剪区域
    $(`#image`).cropper(options)
        // 点击按钮触发上传文件区域
    $(`#chooseImageBtn`).on(`click`, function() {
            $(`#chooseImageInp`).click()
        })
        // 拿到用户选择文件,当表单内容改变时触发
    $(`#chooseImageInp`).on(`change`, function() {
            // 图片的虚拟路径
            // console.log(this.value);
            // console.log(this.files[0]);
            // 获取文件对象
            let file = this.files[0]
            if (file === undefined) {
                return layui.layer.msg(`上传头像不能为空`)
            }
            // 根据文件对象生成路径
            let url = URL.createObjectURL(file)
                // console.log(url);
                //给浏览图片区域赋值
                // 销毁旧的裁剪区域
                // 重新设置图片路径
                // 重新初始化裁剪区域
            img.cropper('destroy').attr('src', url).cropper(options)
        })
        // 点击确认实现头像上传
    $(`#uploadBtn`).on(`click`, function() {
        // 获取裁切区base64 格式的字符串
        // 创建一个 Canvas 画布{width: , height: }
        // 将 Canvas 画布上的内容，转化为 base64 格式的字符串
        var dataURL = img.cropper('getCroppedCanvas', { width: 100, height: 100 }).toDataURL('image/png')
        console.log(dataURL);
        console.log(encodeURIComponent(dataURL));
        //发送axios
        axios({
            method: `post`,
            url: `/my/update/avatar`,
            data: `avatar=${encodeURIComponent(dataURL)}`
        }).then(res => {
            if (res.data.status !== 0) {
                return layui.layer.msg(res.data.message)
            }
            layui.layer.msg(`更换头像成功`)
            window.parent.getUserInfo()
        })
    })

})